<template>
  <s-layout title="赛事列表" navbar="custom" tabbar="/pages/index/index">
    <view class="container">
      <!-- 顶部导航 -->
      <view class="nav-tabs">
        <view class="nav-center-container">
          <view
            class="nav-item football-item"
            :class="{active: activeTab === 'football'}"
            @click="switchTab('football')"
          >
            足球
          </view>
          <view
            class="nav-item basketball-item"
            :class="{active: activeTab === 'basketball'}"
            @click="switchTab('basketball')"
          >
            篮球
          </view>
        </view>
        <view
          class="nav-item award-item"
          :class="{active: activeTab === 'awardNotice'}"
          @click="switchTab('awardNotice')"
        >
          开奖公告
        </view>
      </view>

      <!-- 子分类导航 -->
      <view class="sub-tabs" v-if="activeTab === 'football'">
        <view
          class="sub-item"
          :class="{active: subTab === 'jc'}"
          @click="switchSubTab('jc')"
        >
          竞彩
        </view>
        <view
          class="sub-item"
          :class="{active: subTab === 'bd'}"
          @click="switchSubTab('bd')"
        >
          北单
        </view>
        <view
          class="sub-item"
          :class="{active: subTab === 'zc'}"
          @click="switchSubTab('zc')"
        >
          足彩
        </view>
      </view>

      <!-- 日期切换 -->
      <view class="date-tabs">
        <scroll-view scroll-x class="date-scroll">
          <view
            class="date-item"
            v-for="(date, index) in dateList"
            :key="index"
            :class="{active: activeDate === date.value}"
            @click="switchDate(date.value)"
          >
            <text class="weekday">{{ date.weekday }}</text>
            <text class="date">{{ date.date }}</text>
          </view>
        </scroll-view>
      </view>

      <!-- 开奖公告 -->
      <view class="notice" v-if="activeTab === 'awardNotice'">
        <view class="notice-item">
          <text class="notice-title">足彩</text>
          <view class="notice-date">
            <text>周一</text>
            <text>05/19</text>
          </view>
        </view>
      </view>

      <!-- 比赛列表 -->
      <view class="match-list" v-if="activeTab !== 'awardNotice'">
        <view class="match-item" v-for="(match, index) in matchList" :key="index">
          <view class="match-header">
            <text class="match-id">{{ match.id }}</text>
            <text class="match-league">{{ match.league }}</text>
            <text class="match-status">{{ match.status }}</text>
            <text class="match-time">{{ match.time }}</text>
          </view>

          <view class="match-teams">
            <view class="team-container team-home">
              <image class="team-icon" src="@/static/match/zhudui.jpg" mode="aspectFit"></image>
              <text class="team-name">{{ match.home }}</text>
            </view>
            <text class="vs">VS</text>
            <view class="team-container team-away">
              <text class="team-name">{{ match.away }}</text>
              <image class="team-icon" src="@/static/match/kedui.jpg" mode="aspectFit"></image>
            </view>
          </view>

          <view class="match-odds" v-if="subTab !== 'zc'">
            <view class="odds-row">
              <text class="odds-label">胜平负</text>
              <text class="odds-value">{{ match.odds.win }}</text>
              <text class="odds-value">{{ match.odds.draw }}</text>
              <text class="odds-value">{{ match.odds.lose }}</text>
            </view>
            <view class="odds-row">
              <text class="odds-label">主(-1)</text>
              <text class="odds-value">{{ match.odds.handicapWin }}</text>
              <text class="odds-value">{{ match.odds.handicapDraw }}</text>
              <text class="odds-value">{{ match.odds.handicapLose }}</text>
            </view>
          </view>

          <view class="divider"></view>
        </view>

        <view class="no-more" v-if="matchList.length > 0">
          没有更多了
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script>
  export default {
    data() {
      return {
        activeTab: 'football', // football/basketball/awardNotice
        subTab: 'jc', // jc/bd/zc
        activeDate: '2024-04-29',
        dateList: [
          { weekday: '周五', date: '05/16', value: '2024-05-16' },
          { weekday: '周六', date: '05/17', value: '2024-05-17' },
          { weekday: '周日', date: '05/18', value: '2024-05-18' },
          { weekday: '周一', date: '05/19', value: '2024-05-19' },
        ],
        matchList: [
          {
            id: '周二001',
            league: '日职',
            status: '未开赛',
            time: '04-29 14:00',
            home: '大阪钢巴',
            away: '横滨水手',
            odds: {
              win: '2.23',
              draw: '3.20',
              lose: '2.71',
              handicapWin: '5.20',
              handicapDraw: '3.70',
              handicapLose: '1.50',
            },
          },
          {
            id: '周二004',
            league: '亚冠',
            status: '未开赛',
            time: '04-30 00:30',
            home: '利雅新月',
            away: '阿尔艾因',
            odds: {
              win: '2.18',
              draw: '3.65',
              lose: '2.52',
              handicapWin: '4.20',
              handicapDraw: '4.20',
              handicapLose: '1.53',
            },
          },
        ],
      };
    },
    methods: {
      switchTab(tab) {
        this.activeTab = tab;
      },
      switchSubTab(tab) {
        this.subTab = tab;
      },
      switchDate(date) {
        this.activeDate = date;
      },
    },
  };
</script>

<style>
  .container {
    background-color: #f5f5f5;
    padding-top: 0;
  }

  /* 顶部导航样式 */
  .nav-tabs {
    display: flex;
    height: 88rpx;
    background-color: #ff3d00;
    color: #fff;
    position: relative;
    align-items: center;
    padding: 0 20rpx;
    justify-content: space-between;
  }

  .nav-center-container {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 64rpx;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 32rpx;
    overflow: hidden;
  }

  .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    position: relative;
    height: 64rpx;
    padding: 0 40rpx;
    transition: all 0.3s;
  }

  .football-item {
    color: #fff;
    border-radius: 32rpx;
    background-color: transparent;
  }

  .football-item.active {
    color: #ff3d00;
    background-color: #fff;
  }

  .basketball-item {
    color: #fff;
    background-color: transparent;
  }

  .basketball-item.active {
    color: #fff;
    background-color: transparent;
    font-weight: bold;
  }

  .award-item {
    margin-left: auto;
    width: auto;
    padding: 0 1rpx;
    font-size: 25rpx;
    color: #fff;
  }

  .award-item.active {
    font-weight: bold;
    position: relative;
  }

  /* 子分类导航样式 */
  .sub-tabs {
    display: flex;
    height: 50rpx;
    background-color: #ff3d00;
    border-radius: 0;
    overflow: hidden;
  }

  .sub-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25rpx;
    color: #fff;
  }

  .sub-item.active {
    color: #fff;
    font-weight: bold;
    position: relative;
  }

  .sub-item.active::after {
    content: '';
    position: absolute;
    bottom: -6rpx;
    left: 0;
    width: 100%;
    height: 10rpx;
    background-color: #fff;
    border-radius: 5rpx 5rpx 0 0;
  }

  /* 日期切换样式 */
  .date-tabs {
    background-color: #fff;
    border-radius: 0;
    margin-bottom: 20rpx;
    padding: 10rpx 0;
  }

  .date-scroll {
    white-space: nowrap;
    width: 100%;
  }

  .date-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx 20rpx;
    margin: 0 10rpx;
  }

  .date-item.active .weekday,
  .date-item.active .date {
    font-size: 23rpx;
    color: #333;
  }

  .weekday {
    font-size: 20rpx;
    color: #999;
  }

  .date {
    font-size: 20rpx;
    color: #333;
  }

  /* 开奖公告样式 */
  .notice {
    background-color: #fff;
    border-radius: 0;
    padding: 20rpx;
    margin: 20rpx 0;
  }

  .notice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
  }

  .notice-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
  }

  .notice-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .notice-date text {
    font-size: 26rpx;
    color: #666;
  }

  /* 比赛列表样式 */
  .match-list {
    background-color: #fff;
    border-radius: 0;
    overflow: hidden;
  }

  .match-item {
    padding: 20rpx;
  }

  .match-header {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
  }

  .match-id {
    font-size: 20rpx;
    margin-right: 15rpx;
  }

  .match-league {
    font-size: 20rpx;
    color: #333;
    margin-right: 15rpx;
  }

  .match-status {
    font-size: 20rpx;
    color: #999;
    margin-right: 15rpx;
  }

  .match-time {
    font-size: 20rpx;
    color: #999;
    margin-left: auto;
  }

  /* 球队名称和图标样式 */
  .match-teams {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    justify-content: space-between;
  }

  .team-container {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .team-home {
    justify-content: flex-start;
  }

  .team-away {
    justify-content: flex-end;
  }

  .team-name {
    font-size: 24rpx;
    color: #333;
  }

  .team-icon {
    width: 30rpx;
    height: 30rpx;
    margin: 0 10rpx;
  }

  .vs {
    font-size: 24rpx;
    color: #999;
    margin: 0 20rpx;
    flex-shrink: 0;
  }

  /* 赔率样式 */
  .match-odds {
    margin-bottom: 15rpx;
  }

  .odds-row {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .odds-label {
    font-size: 20rpx;
    color: #666;
    width: 120rpx;
  }

  .odds-value {
    font-size: 20rpx;
    flex: 1;
    text-align: center;
  }

  .divider {
    height: 1rpx;
    background-color: #eee;
    margin: 0 -20rpx;
  }

  .no-more {
    text-align: center;
    padding: 30rpx 0;
    font-size: 26rpx;
    color: #999;
  }
</style>